<template>
	<view class="dx-body">
		<dx-table ref="table" :header="tableHeader" :tableParams="tableParams">
			<!-- 自定义表单 -->
			<template #form-app_ios="scoped">
				<el-row :gutter="20" style="width: 100%">
					<el-col :xs="24" :sm="6">
						<el-input clearable v-model="scoped.row.app_ios.name" placeholder="请输入应用名称"></el-input>
					</el-col>
					<el-col :xs="24" :sm="18">
						<el-input clearable v-model="scoped.row.app_ios.url" placeholder="请输入AppStore链接地址"></el-input>
					</el-col>
				</el-row>
			</template>
			<template #form-app_android="scoped">
				<el-row :gutter="20" style="width: 100%">
					<el-col :xs="24" :sm="6">
						<el-input clearable v-model="scoped.row.app_android.name" placeholder="请输入应用名称"></el-input>
					</el-col>
					<el-col :xs="24" :sm="18">
						<el-input class="upload-apk" clearable v-model="scoped.row.app_android.url" placeholder="请输入下载链接地址">
							<template #append>
								<el-button class="btn-apk" :loading="loading" type="primary" @click="uploadApk"> 上传apk包 </el-button>
							</template>
						</el-input>
					</el-col>
				</el-row>
			</template>
			<template #form-h5="scoped">
				<el-input clearable v-model="scoped.row.h5.url" placeholder="请输入H5可访问链接"></el-input>
			</template>
		</dx-table>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { upload } from '@/uni_modules/dx-admin/api/index';
const tableHeader = reactive({
	tips: '应用管理',
});
const loading = ref(false);
const tableParams = reactive({
	columnConfig: {
		resizable: true,
	},
	rowConfig: {
		isCurrent: false,
		isHover: true,
		height: 55,
	},
	showOverflow: 'tooltip',
	urls: {
		index: 'app/index',
		add: 'app/add',
		edit: 'app/edit',
		del: 'app/del',
		multi: 'app/multi',
	},
	columns: [
		{ type: 'checkbox', width: '60px', operator: false },
		{ type: 'seq', field: 'seq', label: '序号', width: '60px', operator: false },
		{
			label: 'AppId',
			field: 'appid',
			minWidth: '200px',
			rules: [
				{
					required: true,
					message: 'AppId不能为空',
				},
			],
		},
		{
			label: '应用名称',
			field: 'name',
			minWidth: '200px',
			rules: [
				{
					required: true,
					message: '应用名称不能为空',
				},
			],
		},
		{
			label: '应用简介',
			field: 'introduction',
			minWidth: '200px',
			component: {
				name: 'el-input',
				props: {
					placeholder: '请输入应用简介',
					type: 'textarea',
					rows: 2,
				},
			},
		},
		{
			label: '应用描述',
			field: 'description',
			minWidth: '200px',
			component: {
				name: 'el-input',
				props: {
					placeholder: '请输入应用描述',
					type: 'textarea',
					rows: 2,
				},
			},
		},
		{
			label: '应用图标',
			field: 'icon_url',
			render: 'dx-image',
			width: '80px',
			component: {
				name: 'dx-upload',
			},
		},
		{
			label: '应用截图',
			field: 'screenshot',
			operator: false,
			visible: false,
			render: 'dx-image',
			minWidth: '500px',
			component: {
				name: 'dx-upload',
				props: {
					limit: 9,
				},
			},
		},
		{
			label: '苹果App信息',
			field: 'app_ios',
			visible: false,
			operator: false,
			value: {
				url: '',
				name: '',
			},
			minWidth: '200px',
		},
		{
			label: '安卓App信息',
			field: 'app_android',
			visible: false,
			operator: false,
			value: {
				url: '',
				name: '',
			},
			minWidth: '200px',
		},
		{
			label: 'web信息',
			field: 'h5',
			visible: false,
			operator: false,
			value: {
				url: '',
			},
			minWidth: '200px',
		},
		{
			label: '创建时间',
			field: 'create_date',
			width: '200px',
			form: false,
			formatter: 'dxFormatDate',
			search: {
				span: 2,
			},
		},
		{
			type: 'operate',
			field: 'operate',
			label: '操作',
			width: '120px',
			fixed: 'right',
			operator: false,
			buttons: ['edit', 'del'],
			permission: ['dx-func-admin/app/edit', 'dx-func-admin/app/del'],
		},
	],
});
const table = ref();
// 加载表单数据
function getTableList() {
	table.value.getTableList();
}
onLoad(() => {
	nextTick(getTableList);
});
// 上传App
function uploadApk() {
	uni.chooseFile({
		count: 1,
		success: (res: any) => {
			loading.value = true;
			upload(res.tempFiles[0])
				.then((res) => {
					table.value.setFormItem('app_android.url', res);
				})
				.finally(() => {
					loading.value = false;
				});
		},
	});
}
</script>

<style lang="scss">
.upload-apk {
	.el-input__wrapper {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.btn-apk {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}
</style>
